import  React, { Component } from 'react';
import { connect } from 'react-redux';
import { WritrerWarpper, Code,CodeInfo,RecommendAuthor,AuthorTitle,AuthorItem,Avatar,Follow,Name,AuthorDesc } from '../style';
import { Popover } from 'antd';
import 'antd/dist/antd.css';
import {actionCreaters} from '../store'
class Writer extends Component{


    getList(){
        const { Writer,WriterPage } =this.props;
        const newList=Writer.toJS();
        const pageList=[];
        for( let i=(WriterPage-1)*6; i<WriterPage*6 && i< newList.length; i++ ){
                pageList.push(
                    <AuthorItem key={newList[i].id}>
                        <Avatar imgUrl={newList[i].imgUrl} alt=""></Avatar>
                        <Follow>+ 关注</Follow>
                        <Name>{newList[i].name} </Name>
                        <AuthorDesc> {newList[i].desc}</AuthorDesc>
                    </AuthorItem>
                )
        }
        return pageList;
    }



    render(){
        const { WriterPage,WriterTotalPage } =this.props;
        const content = (
            <img style={{width:"160px",height:"160px"}}  src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt=''/>
        );

        return(
            <WritrerWarpper>
                <Popover content={content}>
                    <Code>
                        <img src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt=""/>
                        <CodeInfo>
                            <div className="title">下载简书手机App</div>
                            <div className="description">随时随地发现和创作内容</div>
                        </CodeInfo>
                    </Code>
                </Popover>
                <RecommendAuthor>
                    <AuthorTitle>
                        <span>推荐作者</span>
                        <div className="changes" onClick={()=>{this.props.getMoreAuthor(WriterPage,WriterTotalPage,this.spinIcon1)}}> <i  className="iconfont spin" ref={(icon1)=>{this.spinIcon1=icon1}}> &#xe851;</i>换一批</div>
                    </AuthorTitle>
                    {
                        this.getList()
                    }
                   
                </RecommendAuthor>
            </WritrerWarpper>
        )
    }
}

const mapStateToProps=(state)=>{
    return{
        //immutabled对象的get方法
        Writer:state.getIn(['home','Writer']),
        WriterPage:state.getIn(['home','WriterPage']),
        WriterTotalPage:state.getIn(['home','WriterTotalPage']),
    }
};
const mapDispatchToProps=(dispatch)=>{
    return{
        getMoreAuthor(WriterPage,WriterTotalPage,spin){
            console.log(spin)
            //让换一换部分的转圈
            let originAngle=spin.style.transform.replace(/[^0-9]/ig,''); //获取到transform里面的数字部分
            if(originAngle) {
                originAngle=parseInt(originAngle,10); //转成整型函数
            }else{
                originAngle=0; //第一次时获取到transform里面没有值，就设置为0
            }
            spin.style.transform='rotate('+(originAngle+360)+'deg)'; //每次转一圈，

            if(WriterPage<WriterTotalPage){
                dispatch(actionCreaters.getAuthor(WriterPage+1))
            }else{
                dispatch(actionCreaters.getAuthor(1))
            }
        }
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(Writer)
